<script>
import Header from '@/components/header';
import Footer from '@/components/footer';
import { mapState } from 'vuex';
import { routes } from '@/router';

const dzqBubbleWidth = 320;
const mobileWidth = 768;
const initStyle = {
  position: 'absolute',
  zIndex: '1001',
  width: `${dzqBubbleWidth}px`,
};

export default {
  components: {
    Header,
    Footer,
  },
  data() {
    return {
      isDiscuzNavShow: false,
      codeStyle: initStyle,
      mobile: false,
    };
  },
  computed: {
    ...mapState({
      headNav: (state) => state.config.headnav || [],
      websiteCode: (state) => state.config.websiteCode || '',
    }),
  },
  watch: {
    $route(to) {
      this.setTitle(to);
    },
  },
  created() {
    this.$eventbus.on('discuz-nav-click', this.discuzNavClick);
    this.$eventbus.on('discuz-nav-leave', this.discuzNavLeave);
    this.$eventbus.on('discuz-m-nav-click', this.discuzMNavClick);
    this.$store.dispatch('getConfig');
  },
  methods: {
    setTitle(curRoute) {
      routes.forEach((item) => {
        if (item.name === curRoute.name) window.document.title = item.title;
      });
    },
    discuzNavClick(e) {
      let left = e.x - dzqBubbleWidth / 2;
      let top = e.pageY + 30;
      if (left > window.innerWidth) left = window.innerWidth - dzqBubbleWidth;
      if (window.innerWidth < mobileWidth) left = (window.innerWidth - dzqBubbleWidth) / 2;
      if (top < 60) top = 60;
      this.codeStyle = {
        ...initStyle,
        top: `${top}px`,
        left: `${left}px`,
        position: 'absolute',
      };
      this.isDiscuzNavShow = true;
    },
    discuzNavLeave() {
      this.mobile = false;
      this.isDiscuzNavShow = false;
    },
    discuzMNavClick() {
      this.codeStyle = {
        ...initStyle,
        position: 'fixed',
        top: '55px',
        right: '0',
        left: 'auto',
        width: '100%',
        height: '100%',
        backgroundColor: '#fff',
      };
      this.mobile = true;
      this.isDiscuzNavShow = !this.isDiscuzNavShow;
    },
    discuzMNavClickHide() {
      this.mobile = false;
      this.isDiscuzNavShow = false;
    },
    handleResize({ width }) {
      this.$store.dispatch('setWidth', width);
      if (width <= mobileWidth) {
        this.mobile = true;
      }
    },
  },
};
</script>

<template>
  <div :class="!mobile ? 'zdzq-wrapper' : 'zdzq-wrapper dzq-layout-mobile'">
    <div class="dzq-layout">
      <main class="dzq-layout__body">
        <Header :head-nav="headNav" :code-show="isDiscuzNavShow" />
        <router-view></router-view>
        <Footer :head-nav="headNav" />
      </main>
    </div>
    <div
      v-show="isDiscuzNavShow"
      class="dzq-bubble dzq-bubble--top"
      :style="codeStyle"
      @click.stop="discuzMNavClickHide"
    >
      <div class="dzq-bubble__inner">
        <div class="dzq-bubble__wechat">
          <img :src="websiteCode" />
          <p class="dzq-bubble__wechat-text">
            Discuz! Q 的 PC 端开发中，请等待
            <br />
            移动端请关注官方公众号，访问菜单 "Discuz! Q"
          </p>
        </div>
      </div>
    </div>
    <resize-observer @notify="handleResize" />
  </div>
</template>

<style lang="scss">
@import './styles/global.scss';
.zdzq-wrapper {
  position: relative;
}
</style>
